<script setup lang="ts">
import { inject } from 'vue';
import SonSon from './SonSon.vue';


// 逻辑
interface person{
  name:string
  age:number
}
defineProps<person>()

// const emits=defineEmits<{
//   //参数1：回调函数名称
//   //参数n：都是需要回传数据的类型
//   (e:'my-event',age:number):void
// }>()

// Vue 3.3+ 新增另一种更简洁的语法
const emits=defineEmits<{
  'my-event':[age:number]
  'getName':[name:string]
}>()

//子子组件
//2.inject函数类似鸿蒙的@Consume装饰器，后代组件接收数据
const totalCount=inject<number>('totalCount')
</script>

<template>
  <div class="son">
    <h2>我是子组件</h2>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ totalCount }}</p>
    <button @click="emits('my-event',age)">触发父组件的回调函数传递年龄</button>
    <button @click="emits('getName',name)">触发父组件的回调函数传递名字</button>
    <SonSon/>
  </div>
</template>

<style scoped>
/* 样式 */
.son {
  border: 1px solid red;
}
</style>